<template>
    <div class="error-log">
      <!-- 导航 -->
      <tz-breadcrumb  :pathArr='[{"name": "日志管理"},{"name": "异常日志", "url": ""}]'></tz-breadcrumb>
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="formInline" class="form" label-position="left" label-width="80px"  autocomplete="off" @submit.native.prevent="onSubmit" action="https://www.baidu.com">
        <el-row :gutter="0">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <!-- 时间选择 -->
            <el-form-item class="form-item" label="时间选择">
              <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change='timeChange'></el-date-picker>
            </el-form-item>
            <el-form-item  class="form-item">
              <el-col native-type='submit' :xs="12" :sm="12" :md="12" :lg="24" :xl="24">
                <el-button type="primary" size='medium' native-type='submit'>搜索</el-button>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 搜索结果 -->
      <el-table class="logData" :data="datas" style="width: 100%;padding-bottom: 30px;">
        <!-- 编号 -->
        <el-table-column label="编号">
          <template slot-scope="scope">
            <span>{{ scope.row.id ? scope.row.id : '--' }}</span>
          </template>
        </el-table-column>
        <!-- 负责人 -->
        <el-table-column label="负责人">
          <template slot-scope="scope">
            <span>{{ scope.row.man ? scope.row.man : '--' }}</span>
          </template>
        </el-table-column>
        <!-- 目标服务器 -->
        <el-table-column label="目标服务器">
          <template slot-scope="scope">
            <span>{{ scope.row.ip ? scope.row.ip : '--' }}</span>
          </template>
        </el-table-column>
        <!-- 定位文件 -->
        <el-table-column label="定位文件">
          <template slot-scope="scope">
            <span>{{ scope.row.path ? scope.row.path : '--' }}</span>
          </template>
        </el-table-column>
        <!-- 错误行数 -->
        <el-table-column label="错误行数">
          <template slot-scope="scope">
            <span>{{ scope.row.lineNumber ? scope.row.lineNumber : '--' }}</span>
          </template>
        </el-table-column>
        <!-- 发生时间 -->
        <el-table-column label="发生时间">
          <template slot-scope="scope">
            <span>{{ scope.row.created_at ? scope.row.created_at : '--' }}</span>
          </template>
        </el-table-column>
        <!-- 查看详情 -->
        <el-table-column label="">
          <template slot-scope="scope">
            <el-button type="primary" plain size="medium" @click="logDetail(scope.row.id)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="total > pageNum" class="text-center pager" @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import { msToDate } from './../../controller/common';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  data () {
    return {
      formInline: {
        startTime: '',
        endTime: ''
      },
      time: [],
      page: 1,
      pageNum: 10,
      datas: [],
      total: 0
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    logDetail (id) {
      console.log(id);
      this.$router.push({
        path: '/error-log-detail',
        query: {
          id: id
        }
      });
    },
    timeChange (val) {
      // 日期空间确定时触发
      this.formInline.startTime = msToDate(val[0]);
      this.formInline.endTime = msToDate(val[1]);
    },
    handleCurrentChange (val) {
      this.page = val;
      this.requestData();
    },
    onSubmit () {
      let that = this;
      that.page = 1;
      that.requestData();
    },
    requestData () {
      let that = this;
      http.get(api.errLogList, {
        token: localStorage.getItem('token'),
        pagesize: that.pageNum,
        page: that.page,
        start_date: that.formInline.startTime,
        end_date: that.formInline.endTime
      }, response => {
        console.log(response);
        if (response.code === '10001') {
          that.total = response.data[0].total;
          that.datas = response.data[0].result;
        }
      }, (err) => {
        console.log(err);
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.error-log
  .form
    padding: 2rem
    margin-top: 15px
    margin-bottom: 12px
    box-sizing: border-box
    background: #fff
    box-shadow: 1px 1px 1px #999
    .form-item
      display: inline-block
      margin-right: 35px
      margin-bottom: 0
      label
        font-size: 14px
        color: #333
        width: 70px
        display: inline-block
      .time
        width: 200px
  .pager
    background: #fff
    padding: 0
</style>
